import React from 'react';
import { Carousel } from 'antd-mobile';

import './index.css';

class CustomCarousel extends React.Component {
  state = {
    imgHeight: 100,
  }
  componentDidMount() {
   
  }
  render() {
    return (
        <Carousel
          autoplay={true}
          dots={false}
          infinite
        >
          {this.props.carouselData.map(item => (
            <a
              key={item.id}
              href={item.link_url}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={item.car_img}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
    );
  }
}

export default CustomCarousel;